<template>
  <!-- 留个根标签为了路由组件切换时过渡动画能正常使用 -->
  <div>
    <el-card shadow="hover">
      <el-table :data="skuArr" height="68vh" border stripe>
        <el-table-column
          type="index"
          label="序号"
          align="center"
          width="80"
        ></el-table-column>
        <el-table-column
          label="名称"
          prop="skuName"
          width="130"
        ></el-table-column>
        <el-table-column
          label="价格(元)"
          prop="price"
          width="130"
        ></el-table-column>
        <el-table-column
          label="重量(g)"
          prop="weight"
          width="130"
        ></el-table-column>
        <el-table-column label="默认图片" width="125px">
          <template #default="{ row }">
            <img
              :src="row.skuDefaultImg"
              style="width: 100px; height: 100px"
              alt="商品图片"
            />
          </template>
        </el-table-column>
        <el-table-column
          label="描述"
          prop="skuDesc"
          width="200"
        ></el-table-column>
        <el-table-column label="操作" fixed="right" align="center" width="220">
          <template #default="{ row }">
            <el-button
              :type="row.isSale == 0 ? 'primary' : 'success'"
              :icon="row.isSale == 0 ? 'Top' : 'Bottom'"
              size="small"
              @click="updateSale(row)"
              v-has="`btn.Sku.updown`"
            ></el-button>
            <el-button
              type="primary"
              icon="Edit"
              size="small"
              @click="updateSku(row)"
              v-has="`btn.Sku.update`"
            ></el-button>
            <el-button
              type="info"
              icon="InfoFilled"
              size="small"
              @click="findSku(row)"
              v-has="`btn.Sku.detail`"
            ></el-button>
            <el-popconfirm
              :title="`你确定要删除${row.skuName}?`"
              confirm-button-text="确定"
              cancel-button-text="取消"
              icon="Delete"
              icon-color="red"
              width="200px"
              @confirm="deleteSku(row)"
              v-has="`btn.Sku.remove`"
            >
              <template #reference>
                <el-button type="danger" icon="Delete" size="small"></el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
        <!-- 加载中展示的图片 -->
        <template #empty>
          <img src="@/assets/images/loading.gif" alt="加载中" />
        </template>
      </el-table>
      <!-- 分页器 -->
      <template #footer>
        <el-pagination
          v-model:current-page="pageNo"
          v-model:page-size="pageSize"
          :page-sizes="[5, 10, 20]"
          :total="total"
          background
          small
          layout=" prev, pager, next,jumper,->, sizes, total"
          @size-change="getHasSku(1)"
          @current-change="getHasSku"
        />
      </template>
      <!-- 抽屉组件Drawer：展示商品的详情 -->
      <el-drawer v-model="drawer">
        <template #title>
          <h4 style="font-weight: bold">商品详情</h4>
        </template>
        <!--  el-row：一行 el-col：一列
              gutter 属性来指定列之间的间距
              col 组件的 span 属性指定占该行列数 1-24
              offset 属性可以指定分栏偏移的栏数
              justify  align属性来定义子元素的排版方式
              五个响应尺寸：xs、sm、md、lg 和 xl。
               -->
        <el-row :gutter="20" style="margin-bottom: 15px">
          <el-col :span="7">商品名称：</el-col>
          <el-col :span="17">{{ skuInfo?.skuName }}</el-col>
        </el-row>
        <el-row :gutter="20" style="margin-bottom: 15px">
          <el-col :span="7">商品描述：</el-col>
          <el-col :span="17">{{ skuInfo?.skuDesc }}</el-col>
        </el-row>
        <el-row :gutter="20" style="margin-bottom: 15px">
          <el-col :span="7">价格：</el-col>
          <el-col :span="17">{{ skuInfo?.price }}</el-col>
        </el-row>
        <el-row style="margin-bottom: 15px">
          <el-col :span="7">平台属性：</el-col>
          <el-col :span="17">
            <el-tag
              v-for="item in skuInfo?.skuAttrValueList"
              :key="item.id"
              style="margin: 0 8px 5px 0"
            >
              {{ item.valueName }}
            </el-tag>
          </el-col>
        </el-row>
        <el-row style="margin-bottom: 15px">
          <el-col :span="7">销售属性：</el-col>
          <el-col :span="17">
            <el-tag
              v-for="item in skuInfo?.skuSaleAttrValueList"
              :key="item.id"
              style="margin: 0 8px 5px 0"
            >
              {{ item.saleAttrValueName }}
            </el-tag>
          </el-col>
        </el-row>
        <el-row style="margin-bottom: 15px">
          <el-col :span="8">商品图片：</el-col>
        </el-row>
        <el-row justify="center">
          <el-col :span="20">
            <el-carousel
              :interval="3000"
              indicator-position="outside"
              type="card"
              height="150px"
            >
              <el-carousel-item
                v-for="item in skuInfo?.skuImageList"
                :key="item.id"
              >
                <img :src="item.imgUrl" style="width: 100%" alt="商品图片" />
              </el-carousel-item>
              <el-carousel-item v-show="skuInfo?.skuImageList?.length === 0">
                <img
                  src="@/assets/images/empty.png"
                  style="width: 100%; height: 140px"
                  alt="商品图片"
                />
              </el-carousel-item>
            </el-carousel>
          </el-col>
        </el-row>
      </el-drawer>
    </el-card>
  </div>
</template>

<script setup lang="ts" name="Sku">
import {
  reqCancelSale,
  reqDeleteSku,
  reqSaleSpu,
  reqSkuInfo,
  reqSkuList,
} from '@/api/product/sku'
import type SkuData from '@/api/product/sku/type'
import { ElMessage } from 'element-plus'
import { onMounted, ref } from 'vue'

// 存储分页器当前页码，默认第一页
let pageNo = ref(1)
// 存储一页默认展示几条数据,默认10条
let pageSize = ref(10)
// 存储总共有多少条数据
let total = ref(0)
// 存储SKU数据
let skuArr = ref<SkuData[]>([])
// 控制抽屉组件的显示与隐藏
let drawer = ref(false)
// 存储SKU详细信息
let skuInfo = ref<SkuData>()

// 获取当前页SKU列表数据
const getHasSku = async (pager = pageNo.value) => {
  // size-change current-change事件会自动在会调用注入参数
  pageNo.value = pager // 当需要返回第一页时传递1
  const result = await reqSkuList(pageNo.value, pageSize.value)
  if (result.code === 200) {
    // 存储SKU数据
    skuArr.value = result.data.records
    // 存储数据总条数
    total.value = result.data.total
  } else {
    ElMessage.error('获取SKU数据失败')
  }
}
// 点击商品进行上架与下架按钮的回调
const updateSale = async (row: SkuData) => {
  if (row.isSale == 0) {
    // isSale 0:下架，1:上架
    // 当前为下架状态，点击上架
    const result = await reqSaleSpu(row.id)
    if (result.code == 200) {
      ElMessage.success('上架成功')
      // 重新获取SKU信息
      getHasSku()
    }
  } else {
    // 当前为上架状态，点击上架
    const result = await reqCancelSale(row.id)
    if (result.code == 200) {
      ElMessage.warning('下架成功')
      // 重新获取SKU信息
      getHasSku()
    }
  }
}
// 点击编辑SKU按钮到的回调
const updateSku = (row: SkuData) => {
  ElMessage.warning('正在研发中请稍后！')
  console.log(row)
}
// 点击查看商品详情按钮的回调
const findSku = async (row: SkuData) => {
  //发请求获取该SKU的全部信息
  let result = await reqSkuInfo(row.id)
  if (result.code == 200) {
    // 存储获取到的数据
    skuInfo.value = result.data
  }
  // 显示抽屉
  drawer.value = true
}
// 点击删除SKU按钮的回调
const deleteSku = async (row: SkuData) => {
  // 发请求删除SKU
  let result = await reqDeleteSku(row.id)
  if (result.code == 200) {
    ElMessage.success('删除成功')
    // 重新获取商品SKU列表
    // pageNo.value = skuArr.value.length > 1 ? pageNo.value : pageNo.value - 1
    getHasSku()
  } else {
    ElMessage.error('系统数据不能删除')
  }
}
// 当组件挂载完成时，发送请求获取SKU数据
onMounted(() => {
  getHasSku()
})
</script>

<style scoped></style>
